<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>Simple example - Editor.md examples</title>


    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/master.css}" />
    <link rel="stylesheet" th:href="@{/css/gloable.css}" />
    <link rel="stylesheet" th:href="@{/css/nprogress.css}" />
    <link rel="stylesheet" th:href="@{/css/timeline.css}" />


    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" />
<!--    &lt;!&ndash; 引入 layui.css &ndash;&gt;-->
<!--    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">-->


    <link rel="stylesheet" th:href="@{/css/examples/style.css}" />
    <link rel="stylesheet" th:href="@{/css/editormd.css}" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />

</head>
<body>

<header class="gird-header">
    <div class="header-fixed">
        <div class="header-inner">
            <a href="javascript:void(0)" class="header-logo" id="logo">Mr.liu</a>
            <nav  class="nav" id="nav">
                <ul>
                    <li><a th:href="@{/index}">首页</a></li>
                    <li><a th:href="@{/admin/blogs}">博客管理</a></li>
                    <li><a th:href="@{/markdown/edit}">写文章</a></li>
                </ul>
            </nav>
            <a th:href="@{/admin/logout}" class="blog-user">
                <i class="fa fa-qq"></i>
            </a>
            <a class="phone-menu">
                <i></i>
                <i></i>
                <i></i>
            </a>
        </div>
    </div>
</header>


<div id="layout">
    <header>
        <h1>Simple example</h1>
    </header>
    <form name="mdEditorForm" class="layui-form layui-form-pane" method="post" enctype="multipart/form-data" th:action="@{/article/publish}">
        <div class="layui-form-item">
            <label class="layui-form-label">标题：</label>
            <div class="layui-input-block">
                <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者：</label>
            <div class="layui-input-inline">
                <input type="text" name="author" lay-verify="required" placeholder="请输入作者名" autocomplete="off" class="layui-input">
            </div>
        </div>
<!--        标题:<input type="text" name="title"><br>-->
<!--        作者:<input type="text" name="author">-->
        <div id="test-editormd">
            <textarea style="display:none;" name="content"></textarea>
        </div>

        <br>
        <br>


<!--        <div class="form-group">-->
<!--            <label for="exampleInputFile"></label>-->
<!--            <input type="file" name="headerImg" id="exampleInputFile"></input>-->
<!--        </div>-->

        <fieldset class="layui-elem-field layui-field-title" style=" margin-top: 30px;">
            <legend align="center">文章首图</legend>
        </fieldset>

<!--        <button type="button" class="layui-btn" id="test1">-->
<!--            <i class="layui-icon">&#xe67c;</i>选择图片-->
<!--        </button>-->
<!--        <button type="button" class="layui-btn" id="btnUpload">开始上传</button>-->
<!--        <img id="myPic" src="" width="500" />-->


        <div class="layui-upload" align="center">

<!--            <div>-->
<!--                <label for="form111"></label>-->
<!--                <input type="file" name="picture" id="form111" value="上传图片"></input>-->
<!--            </div>-->

<!--            <div >-->
<!--                <button  type="button" class="layui-btn" id="test1">上传图片</button>-->
<!--            </div>-->


            <button type="button" class="layui-btn"  onclick="test1.click()">上传图片</button>
            <input type="file" name="picture" id="test1" style="display: none;" />

            <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1">
                <p id="demoText"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>

        <a name="list-progress"> </a>

        <div style="margin-top: 10px;">

            <!-- 示例-970 -->
            <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

        </div>


    </form>

</div>

<footer class="grid-footer">
    <div class="footer-fixed">
        <div class="copyright">
            <div class="info">
                <div class="contact">
                    <a href="javascript:void(0)" class="github" target="_blank"><i class="fa fa-github"></i></a>
                    <a href="#" class="qq" target="_blank" ><i class="fa fa-qq"></i></a>
                    <a href="#" class="email" target="_blank" ><i class="fa fa-envelope"></i></a>
                    <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
                </div>
                <p class="mt05">
                    Copyright &copy; 2019-2020 ZQ博客 All Rights Reserved V.3.1.3 Power by ZQ博客
                </p>
            </div>
        </div>
    </div>
</footer>


<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/yss/gloable.js}"></script>
<script th:src="@{/js/plugins/nprogress.js}"></script>
<script>NProgress.start();</script>
<script th:src="@{/js/pagediary.js}"></script>
<script>
    window.onload = function () {
        NProgress.done();
    };
</script>

<script>NProgress.start();</script>
<script>
    window.onload = function () {
        NProgress.done();
    };
</script>

<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>




<script th:src="@{/js/examples/jquery.min.js}"></script>
<script th:src="@{/js/editormd.min.js}"></script>



<script type="text/javascript">





    var testEditor;

    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "../lib/",
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/article/image/upload",
            toolbarIcons : function () {
                return ["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","|","goto-line","watch","preview","fullscreen","clear","search","|","help","info", "||", "publish"];
            },
            
            toolbarIconTexts: {
                publish: "<span bgcolor='gray' style='background-color: #3ad900'>发布</span>"
            },
            
            toolbarHandlers : {
                publish: function (cm, icon, cursor, selection) {
                    mdEditorForm.method = "post";
                    mdEditorForm.action = "/article/publish";//提交至服务器的路径
                    mdEditorForm.submit();
                }
            }
        });

        /*
        // or
        testEditor = editormd({
            id      : "test-editormd",
            width   : "90%",
            height  : 640,
            path    : "../lib/"
        });
        */
    });


    layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'https://httpbin.org/post' //改成你自己的上传接口
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();

                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                    console.log(index); //得到文件索引
                    console.log(file); //得到文件对象
                    console.log(result); //得到文件base64编码，比如图片

                    //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

                    //这里还可以做一些 append 文件列表 DOM

                    //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                    //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                });
            }
            // ,url: '/article/image/upload' //改成你自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });

</script>

</body>
</html>